<template>
    <div>
    <el-table
            :data="tableData"
            stripe
            highlight-current-row
            @current-change="handleCurrentChange"
            style="width: 100%;"
            :default-sort = "{prop: 'date', order: 'descending'}"
            @click="wkk"
    >
<!--        <el-table-column-->
<!--                prop="imgid"-->
<!--                label="图片ID"-->
<!--                sortable-->
<!--                width="100">-->
<!--        </el-table-column>-->
        <el-table-column
                prop="date"
                label="日期"
                sortable
                width="150">
        </el-table-column>
        <el-table-column
                prop="time"
                label="时间"
                >
        </el-table-column>
        <el-table-column
                prop="tag"
                label="标签"
                width="80">
        </el-table-column>

        <el-table-column
                label="来自相机"
                width="100">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)"  size="small">{{scope.row.cameraid}}</el-button>
            </template>
        </el-table-column>

        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="wkk(scope.row)"  size="small">查看图片</el-button>
            </template>
        </el-table-column>
    </el-table>
        <el-dialog
                title="图片"
                :visible.sync="dialogVisible"
                width="50%"
        >
            <el-image
                    style="width: 100%"
                    :src="url"
                    >

            </el-image>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>
    import API from "../../api";
    import API_PRO from "../../api/API_PRO";
    export default {
        name: "foreign_list",
        data(){
            return{
                dialogVisible:false,
                tableData: [
                    {
                        "imgid": "1",
                        "tag": "people",
                        "time": "2017-09-11T00:00:00Z",
                        "date": "2019-09-12",
                        "cameraid": "1",
                        "url": "test1"
                    }],
                url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                baseURL:API_PRO.baseURL
            }

        },
        methods:{
            getList(){
                API.foreignList().then(res=>{
                    if(res.code){
                        alert(res.message);
                        return;
                    }
                    this.tableData = res
                }).catch(msg => {
                    if(res.code){
                        alert(res.message);
                        return;
                    }
                    alert(msg)
                })
            },
            handleClick(item){
                console.log(item)
                this.$router.push({path: `/camera/`+item.cameraid+`/main`})
            },
            watchimg(item){

            },
            wkk(item){
                this.dialogVisible=true;
                this.url=this.baseURL+'url/get/'+item.imgid
                console.log(this.url)
            },
            handleCurrentChange(val) {
                console.log(val.url)
            },
            setData(data){
                this.tableData=data
            }

        },
        mounted() {
            // this.getList()
        },
    }


</script>

<style scoped>


</style>
